<template>
	<view class="tabBody">
		<view class="tabOne" v-for="(item,index) in tabList" :key="index" @click="tabClick(item.sortId)"
			:style="{background: tabCurrent===item.sortId?'rgba(237, 181, 166, 1)':''}">
			<view class="tabIcon">
				<image :src="imgPrefixL + `${item.icon}`"></image>
			</view>
			<view class="tabTitle" :style="{color: tabCurrent===item.sortId?'rgba(255, 255, 255, 1)':''}">
				{{item.sortName}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listTabsByNavId
	} from '@/api/tabs/index.js';
	export default {
		name: "tabs",
		data() {
			return {
				tabList: [],
				imgPrefixL: process.env.VUE_APP_IMG_BASE_URL,
				videoPrefixL: process.env.VUE_APP_VIDEO_BASE_URL,
			};
		},
		methods: {
			getTabList() {
				listTabsByNavId({
					parentId: this.navCurrent
				}).then(res => {
					this.tabList = res.data
					this.$store.commit('updateTabCurrent', this.tabList[0].sortId)
				})
			},
			tabClick(sortId) {
				this.playSound()
				this.$store.commit("updateTabCurrent", sortId);
				this.$store.commit('updateCategoryAndShopsReveals', true);
			},
			playSound() {
				const audioContext = uni.createInnerAudioContext(); // 创建音频上下文
				if (this.yinxiao.length > 1) {
					audioContext.src = this.videoPrefixL + parseInt(this.yinxiao[1].url);
				} else {
					// 设置音频地址
					audioContext.src = this.videoPrefixL + parseInt(this.yinxiao[0].url);
				}
				// 播放声音
				audioContext.play();
			},
		},
		computed: {
			navCurrent() {
				return this.$store.state.navCurrent;
			},
			tabCurrent() {
				return this.$store.state.tabCurrent;
			},
			yinxiao() {
				return this.$store.state.yinxiao;
			}
		},
		watch: {
			navCurrent: {
				immediate: true,
				handler(newValue) {
					this.getTabList();
				}
			}
		},
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";

	.tabBody {
		width: 79.146rpx;
		height: 472rpx;
		background: rgba(255, 255, 254, 1);
		border-right: 1rpx solid rgba(94, 94, 94, 0.1);

		.tabOne {
			width: 79.146rpx;
			height: 37.689rpx;
			display: flex;
			flex-direction: row;
			border-radius: 31.407rpx;

			.tabIcon {
				padding-top: 7.852rpx;
				margin-left: 15rpx;

				image {
					width: 21.985rpx;
					height: 21.985rpx;
				}
			}

			.tabTitle {
				margin: auto;
				margin-right: 10rpx;
				width: 40rpx;
				height: 17.588rpx;
				line-height: 17.588rpx;
				font-size: 10rpx;
				text-align: center;
				font-family: AlimamaDaoLiTiTTF;
				color: rgba(166, 166, 166, 1);
			}
		}
	}
</style>